<template>
	<view>
		<cu-custom bgColor="bg-white-nav" isBack>
		    <block slot="content">接单记录</block>
		</cu-custom>
		<view class="tabs">
			<view class="tabs__item" :class="active == item.id ? 'active' : '' " v-for="(item,index) in tabsList" :key="item.id" @click="changTabs(item)">{{item.text}}</view>
		</view>
		<view style="height: 44px;"></view>
		<x-refresh :use="isRefresh" @refresh='refresh' height @loadMore="loadMore" :bottomTips="bottomTips" ref='xRefresh'>
			<view class="padding-left padding-right m-t20" v-for="item in list" :key="item.id">
				<order-cell></order-cell>
			</view>
		</x-refresh>
	</view>
</template>

<script>
	import orderCell from './components/order-cell.vue'
	export default {
		components:{
			orderCell
		},
		data() {
			return {
				isRefresh: true,
				active:1,
				tabsList:[
					{id:'1',text:'全部'},
					{id:'2',text:'接单中'},
					{id:'3',text:'接单完成'},
				],
				list:[
					{id:1,name:"wanju1"},
					{id:2,name:"wanju2"},
					{id:3,name:"wanju3"},
					{id:4,name:"wanju4"},
				],
				bottomTips:"more"
			}
		},
		methods:{
			changTabs(item) {
				this.active = item.id
			},
			//自定义下拉刷新
			refresh() {
				setTimeout(() => {
					this.$refs.xRefresh.reSet()
				}, 1000)
			},
			loadMore() {
				console.log('触底了')
				this.bottomTips = 'loading'
				setTimeout(() => {
					this.list.push({id:5,name:'玩具5'})
				},2000)
			}
		}
	}
</script>

<style lang="scss">
	.tabs {
		height: 44px;
		background: #fff;
		display: flex;
		align-items: center;
		position: fixed;
		top: calc(--status-bar-height + 44px);
		left: 0;
		right: 0;
		z-index: 99;
		&__item {
			flex: 1;
			text-align: center;
			padding: 23rpx 0;
			font-size: 26rpx;
			color: #666;
		}
		.active {
			position: relative;
			color:#111;
			font-weight: 600;
			&::after {
				content: '';
				width: 26rpx;
				height: 6rpx;
				background: $uni-color-primary;
				border-radius: 1rpx;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
</style>